<template>
  <div class="show">
    <div class="title">修改密码</div>
    <el-form :model="changePwd" ref="changPwdRef" status-icon>
      <el-form-item label="密码"
                    prop="pass"
                    class="item"
                    :rules="[{validator: validatePass, trigger: 'blur'}]">
        <el-input type="password"
                  class="input"
                  v-model="changePwd.pass"
                  prop="pass"
                  show-password></el-input>
      </el-form-item>
      <el-form-item label="确认密码"
                    prop="checkPass"
                    class="item"
                    :rules="[{validator: validateCheckPass, trigger: 'blur'}]">
        <el-input type="password"
                  class="input"
                  v-model="changePwd.checkPass"
                  show-password></el-input>
      </el-form-item>
      <el-form-item class="item-btn">
        <el-button id="submit"  type="primary" @click="submitForm()">提交</el-button>
        <el-button id="reset" @click="resetForm()">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {getCurrentInstance, reactive, ref} from "vue";
import {useRouter} from "vue-router/dist/vue-router";
import {ElMessage} from "element-plus";

export default {
  name: "changePwd",
  setup(){
    const {proxy} = getCurrentInstance()
    const router = useRouter()
    const changPwdRef = ref(null)
    let changePwd = reactive({
      pass: '',
      checkPass: ''
    })
    let validatePass =(rule,value,callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (changePwd.checkPass !== '') {
          proxy.$refs.changPwdRef.validateField('checkPass',() => null);
        }
        callback();
      }
    }
    let validateCheckPass = (rule,value,callback) => {
      if (value === '') {
        callback(new Error('请输入确认密码'))
      } else if (value !== changePwd.pass) {
        callback(new Error("两次输入密码不一致!"))
      } else {
        callback()
      }
    }
    function submitForm() {
      proxy.$refs.changPwdRef.validate((valid) => {
        if (valid) {
          proxy.$axios.put(
              `/login/edit`,
              {
                // eslint-disable-next-line no-undef
                username: $cookies.get("id"),
                password: changePwd.pass
              }
          ).then(
              response => {
                if (response.data) {
                  ElMessage({
                    type: 'success',
                    message: '修改成功，请用新密码重新登录',
                  })
                  router.push({path: '/'})
                  // eslint-disable-next-line no-undef
                  $cookies.remove("name") //清除cookie
                  // eslint-disable-next-line no-undef
                  $cookies.remove("id")
                  // eslint-disable-next-line no-undef
                  $cookies.remove("role")
                } else {
                  ElMessage({
                    type: 'error',
                    message: '修改失败，新密码不能与旧密码一致',
                  })
                }
              },
              error => {
                console.log('请求失败', error.message)
              }
          )
        }else {
          return false
        }
      })
    }
    function resetForm(){
      proxy.$refs.changPwdRef.resetFields()
    }
    return{
      changePwd,
      changPwdRef,
      validatePass,
      validateCheckPass,
      submitForm,
      resetForm
    }
  }
}
</script>

<style scoped>
.show{
  margin: 100px auto;
  width: 80%;
  height: 300px;
  border: 5px solid lightcyan;
  transition: all 0.9s;
  border-radius: 10px;
}
.show:hover{
  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.4);
  margin-top: 90px;
}
.title {
  font-size: 20px;
  text-align: center;
  margin-top: 20px;
  color: #2CD9D9FF;
  display: flex;
  justify-content: center;
}
.input{
  width: 50%;
}
.item{
  margin-top:2%;
  margin-left:25%;
  line-height:5px;
}
.item-btn{
  margin-top:2%;
  margin-left:25%;
  line-height:5px;
  display:flex;
  justify-content: center;
}
</style>